<template>
  <div class="content">
    <div class="tab_group">
      <div class="tab_item">
        <div class="ti">
          <div class="tab_icon">
            <Icon type="md-bookmarks" size="36" color="#f2f2f5" class="item_icon"/>
          </div>
          <div class="tab_txt">
            <p class="num">25</p>
            <p class="cn">待办事项</p>
          </div>
        </div>
      </div>
      <div class="tab_item">
        <div class="ti">
          <div class="tab_icon">
            <Icon type="md-bookmarks" size="36" color="#f2f2f5" class="item_icon"/>
          </div>
          <div class="tab_txt">
            <p class="num">25</p>
            <p class="cn">待办事项</p>
          </div>
        </div>
      </div>
      <div class="tab_item">
        <div class="ti">
          <div class="tab_icon">
            <Icon type="md-bookmarks" size="36" color="#f2f2f5" class="item_icon"/>
          </div>
          <div class="tab_txt">
            <p class="num">25</p>
            <p class="cn">待办事项</p>
          </div>
        </div>
      </div>
      <div class="tab_item">
        <div class="ti">
          <div class="tab_icon">
            <Icon type="md-bookmarks" size="36" color="#f2f2f5" class="item_icon"/>
          </div>
          <div class="tab_txt">
            <p class="num">25</p>
            <p class="cn">待办事项</p>
          </div>
        </div>
      </div>
      <div class="tab_item">
        <div class="ti">
          <div class="tab_icon">
            <Icon type="md-bookmarks" size="36" color="#f2f2f5" class="item_icon"/>
          </div>
          <div class="tab_txt">
            <p class="num">25</p>
            <p class="cn">待办事项</p>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-cont" ref="chartHeight">
      <Row :gutter="10">
        <Col :span="4">
          <div class="time-line" :style="sameHeight">
            <Timeline>
              <TimelineItem>
                <p class="time">1976年</p>
                <p class="content">Apple I 问世</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">1984年</p>
                <p class="content">发布 Macintosh</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2007年</p>
                <p class="content">发布 iPhone</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2010年</p>
                <p class="content">发布 iPad</p>
              </TimelineItem>
              <TimelineItem>
                <p class="time">2011年10月5日</p>
                <p class="content">史蒂夫·乔布斯去世</p>
              </TimelineItem>
            </Timeline>
          </div>
        </Col>
        <Col :span="20">
          <Row :gutter="10">
            <Col :span="16">
              <div class="chart">
                <div class="chart-tp" id="cBar"></div>
                <div class="chart-bt" id="cLine"></div>
              </div>
            </Col>
            <Col :span="8">
              <div class="tb-h" :style="sameHeight">
                <Table :max-height="500" :columns="columns" :data="data" size="small"></Table>
              </div>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
  import {getCLine, getBar} from '@/utils/echarts'

  export default {
    name: '',
    props: {},
    data() {
      return {
        title: '',
        columns: [{title: '应用', key: 'app', align: 'center'},
          {title: '用户数（个）', key: 'count', align: 'center'},
          {title: '收益（元）', key: 'total', align: 'center'}],
        data: [{app: '搬砖小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '小程序', count: 10, total: 100},
          {app: '微信公众号', count: 10, total: 100}],
        sameHeight: {
          height: ''
        }
      }
    },
    methods: {
      renderCLine() {
        let option = getCLine({
          xAxis: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09'],
          yName: '活跃用户',
          data: [{name: '搬砖笔记', data: [54, 45, 54, 23, 65, 74, 54, 54, 67]},
            {name: '小程序', data: [34, 65, 85, 43, 83, 75, 83, 48, 54]},
            {name: '微信公众号', data: [22, 73, 34, 64, 82, 38, 37, 29, 64]}]
        })
        let ec = this.$echarts.init(document.getElementById('cLine'))
        ec.setOption(option, window.onresize = ec.resize())
      },
      renderCBar() {
        let option = getBar({
          xAxis: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09'],
          yName: '活跃用户',
          data: [{name: '搬砖笔记', data: [54, 45, 54, 23, 65, 74, 54, 54, 67]},
            {name: '小程序', data: [34, 65, 85, 43, 83, 75, 83, 48, 54]},
            {name: '微信公众号', data: [22, 73, 34, 64, 82, 38, 37, 29, 64]}]
        })
        let ec = this.$echarts.init(document.getElementById('cBar'))
        ec.setOption(option, window.onresize = ec.resize())
      },
    },
    created() {
      this.$bus.$emit('getSubMenu', {openName: '', activeName: ''})
      this.$nextTick(() => {
        this.renderCLine()
        this.renderCBar()
        let height = this.$refs.chartHeight.offsetHeight
        Object.assign(this.sameHeight, {height: height + 'px'})
      })
    }
  }
</script>
<style scoped lang="scss">
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

    .tab_group {
      display: flex;
      flex-direction: row;
      padding: 10px 5px;
      border: 1px solid #d1e2e5;
      background-color: #fff;
      .tab_item {
        flex: 1;
        padding: 5px;
        cursor: default;

        .ti {
          display: flex;
          flex-direction: row;
          border: 1px solid #2c3e50;
          border-radius: 1px;
          overflow: hidden;
          background-color: #f8f8f9;

          .tab_icon {
            background-color: #055065;
            line-height: 56px;
            width: 56px;
            text-align: center;

            .item_icon {
              vertical-align: middle;
            }
          }

          .tab_txt {
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
            padding: 5px 12px;

            .num {
              font-size: 20px;
              font-weight: 600;
              line-height: 24px;
            }

            .cn {
              font-size: 14px;
              line-height: 22px;
              white-space: nowrap;
              font-weight: 500;
            }
          }
        }
      }
    }

    .chart-cont {
      flex: 1;
      margin-top: 8px;
      .chart{
        background-color: #ffffff;
        .chart-tp {
          height: 300px;
          width: 100%;
        }
        .chart-bt {
          height: 300px;
          width: 100%;
          padding: 0 5px 20px;
        }
      }
      .time-line{
        padding: 10px 10px;
        background-color: #fff;
        .time{
          font-size: 14px;
          font-weight: bold;
        }
        .content{
          padding-left: 5px;
        }
      }
      .tb-h{
        background-color: #ffffff;
      }
    }
  }
</style>
